@charset "UTF-8";
@import "common/var";
@import "mixins/button";
@import "mixins/mixins";
@import "mixins/utils";

@include b(button) {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    background: $--button-default-background-color;
    border: $--border-width-base $--border-style-base $--button-default-border-color;
    color: $--button-default-font-color;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: $--button-font-weight;
    @include utils-user-select(none);
    //& + & {
    //  margin-left: 10px;
    //}

    @include button-size($--button-height, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);

    &:hover,
    &:active,
    &:focus {
        color: $blue-5;
        border-color: $blue-5;
    }

    &::-moz-focus-inner {
        border: 0;
    }

    & [class*="el-icon-"] {
        & + span {
            margin-left: 5px;
        }
    }

    @include when(plain) {
        &:hover,
        &:focus {
            background: $white;
            border-color: $--color-primary;
            color: $--color-primary;
        }

        &:active {
            background: $white;
            border-color: mix($black, $--color-primary, $--button-active-shade-percent);
            color: mix($black, $--color-primary, $--button-active-shade-percent);
            outline: none;
        }
    }

    @include when(active) {
        color: mix($black, $--color-primary, $--button-active-shade-percent);
        border-color: mix($black, $--color-primary, $--button-active-shade-percent);
    }

    @include when(disabled) {
        &,
        &:hover,
        &:focus {
            color: $--button-disabled-font-color;
            cursor: not-allowed;
            background-image: none;
            background-color: $--button-disabled-background-color;
            border-color: $--button-disabled-border-color;
        }

        &.el-button--text {
            background-color: transparent;
        }

        &.is-plain {
            &,
            &:hover,
            &:focus {
                background-color: $white;
                border-color: $--button-disabled-border-color;
                color: $--button-disabled-font-color;
            }
        }
    }

    @include when(loading) {
        position: relative;
        pointer-events: none;

        &:before {
            pointer-events: none;
            content: '';
            position: absolute;
            left: -1px;
            top: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, .35);
        }
    }
    //@include when(round) {
    //    border-radius: 20px;
    //    padding: 12px 23px;
    //}
    @include when(circle) {
        border-radius: 50%;
        width: $--button-height;
        padding: 0;
        text-align: center;
    }
    @include m(primary) {
        @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
    }
    @include m(success) {
        @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
    }
    @include m(warning) {
        @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
    }
    @include m(danger) {
        @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
    }
    @include m(info) {
        @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
    }

    @include m(lg) {
        @include button-size($--button-lg-height, $--button-lg-padding-horizontal, $--button-lg-font-size, $--button-lg-border-radius);
        @include when(circle) {
            width: $--button-lg-height;
        }
    }
    @include m(sm) {
        @include button-size($--button-sm-height, $--button-sm-padding-horizontal, $--button-sm-font-size, $--button-sm-border-radius);
        @include when(circle) {
            width: $--button-sm-height;
        }
    }

    @include m(text) {
        border-color: transparent;
        color: $--color-primary;
        background: transparent;
        padding-left: 0;
        padding-right: 0;

        &:hover,
        &:focus {
            color: mix($white, $--color-primary, $--button-hover-tint-percent);
            border-color: transparent;
            background-color: transparent;
        }
        &:active {
            color: mix($black, $--color-primary, $--button-active-shade-percent);
            border-color: transparent;
            background-color: transparent;
        }

        &.is-disabled,
        &.is-disabled:hover,
        &.is-disabled:focus {
            border-color: transparent;
        }
    }
}

@include b(button-group) {
    @include utils-clearfix;
    display: inline-block;
    vertical-align: middle;

    & > .el-button {
        float: left;
        position: relative;

        & + .el-button {
            margin-left: 0;
        }

        &.is-disabled {
            z-index: 1;
        }

        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:first-child:last-child {
            border-radius: $--button-border-radius;
            &.is-circle {
                border-radius: 50%;
            }
        }

        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        &:not(:last-child) {
            margin-right: -1px;
        }

        &:hover,
        &:focus,
        &:active {
            z-index: 1;
        }

        @include when(active) {
            z-index: 1;
        }
    }

    & > .el-dropdown {
        & > .el-button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left-color: rgba($white, 0.5);
        }
    }

    @each $type in (primary, success, warning, danger, info) {
        .el-button--#{$type} {
            &:first-child {
                border-right-color: rgba($white, 0.5);
            }

            &:last-child {
                border-left-color: rgba($white, 0.5);
            }

            &:not(:first-child):not(:last-child) {
                border-left-color: rgba($white, 0.5);
                border-right-color: rgba($white, 0.5);
            }
        }
    }
}
